<template>
    <div class="header">
        <a-row v-if="windowFlag">
            <a-col :span="6">
                <router-link to="/">
                    <img src="../../assets/img/logo.png" style="height: 40px" />
                    <span style="font-size: 20px"> 猿帥</span>
                </router-link>
            </a-col>
            <a-col :span="2"></a-col>
            <a-col :span="3" v-for="menu in menus" :key="menu.id">
                <router-link v-bind:to="menu.menuLink">
                    <a-icon
                        v-bind:type="menu.menuIcon"
                        v-bind:style="menu.iconStyle"
                    />{{ menu.menuName }}
                </router-link>
            </a-col>
        </a-row>
        <a-row v-else>
            <a-col :span="1"></a-col>
            <a-col :span="1"></a-col>
            <a-col :span="1" @click="menuShow()">
                <a-icon type="menu" />
            </a-col>
            <a-col :span="18">
                <router-link to="/">
                    <img src="../../assets/img/logo.png" style="height: 40px" />
                </router-link>
            </a-col>
            <a-col :span="1"></a-col>
            <a-col :span="1"></a-col>
            <a-col :span="1"></a-col>
        </a-row>
        <div class="menu" id="menu">
            <a-row>
                <a-col :span="24">
                    <router-link to="/">
                        <span>首页</span>
                    </router-link>
                </a-col>
            </a-row>
            <a-row v-for="menu in menus" :key="menu.id">
                <a-col :span="24">
                    <router-link v-bind:to="menu.menuLink">
                        <a-icon
                            v-bind:type="menu.menuIcon"
                            v-bind:style="menu.iconStyle"
                        />
                        <span>{{ menu.menuName }}</span>
                    </router-link>
                </a-col>
            </a-row>
        </div>
    </div>
</template>

<script>
export default {
    props: ["windowFlag"],
    data() {
        return {
            menus: [
            ],
            //默认关闭
            menuFlag: false,
        };
    },
    mounted() {
        this.getAll();
    },
    methods: {
        /* 获取所有菜单项 */
        getAll(){
            this.$api.menu.getAll().then(res => {
                if(res.code==200){
                    this.menus = res.data.menus;
                }else{
                    this.$message.error(res.message);
                }
            })
        },
        /* 控制菜单缩放 */
        menuShow() {
            if (this.menuFlag) {
                //关闭
                this.menuFlag = false;
                document.getElementById("menu").style["animation"] =
                    "menuOFF 1s forwards";
            } else {
                //开启
                this.menuFlag = true;
                document.getElementById("menu").style["animation"] =
                    "menuON 1s forwards";
            }
        },
    },
    
};
</script>

<style lang='less' scoped>
.header {
    position: fixed;
    top: 0px;
    width: 100%;
    background:  rgba(255, 255, 255, 0.95);
    //background:  #C0C0C0;
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    z-index: 999;
    color: black;
    a {
        color: black;
    }
    a-col:hover {
        color: blue;
    }
    .menu {
        width: auto;
        height: auto;
        background: rgba(0, 0, 0, 0.7);
        padding: 10px 30px;
        position: fixed;
        top: 60px;
        left: -500px;
        z-index: 999;
        span {
            color: white;
        }
    }
}
</style>